*{
    margin: 0; padding: 0; list-style: none;
}
#main{
    width: auto; height: auto; margin: 20px;
  }
.table-wrap{
     position: relative;width: 800px;height: auto; 
}
.htable{
   width: 100%;height: auto; border: 1px solid #ebeef5;  display: block;font-size: 14px;
   overflow-x:scroll;
}
/* 表头 */
.htable-head{
    font-weight: bold; color: #54565a;
}
/* 加载中... */


.htable-head,.htable-body,.htable-load{
    width: 1200px; height: auto; display: block; padding-left: 150px; box-sizing: border-box;
}
.htable-body,.htable-load{
    color:#6a6c70;  font-weight: normal;font-weight: 500; display: none;
}
.htable-load{
    border-top: 1px solid #ebeef5;
   /*  position: realtive; */
}
.htable-load-cont{
    text-align: center; position: absolute; left: 0; top: 41px;
}
.show{
    display: block;
}
/* 列表 */
.htable-head ul,.htable-body ul{
   width: auto; height: 40px;line-height: 40px; display: block;padding-right: -150px;
}
.htable-body ul{
    border-top: 1px solid #ebeef5; background-color: #FFF; transition: background-color ease .2s;   
}
.htable-body ul:last-of-type,.htable-body ul:last-of-type li:first-of-type{
    border-bottom: 1px solid #ebeef5;
}
.htable-body ul:last-of-type li:first-of-type{
    height: 41px;
}
.htable-body ul:hover li{
    background-color: #f5f7fa; 
}
.htable-head li,.htable-body li{
    width: 150px; height: 40px; display: block; float: left; box-sizing: border-box;padding-left: 20px;
    border-left: 1px solid #ebeef5; background: #fff;
} 
.htable-head li{
    background: #f7f7f7;
}
.htable-head li span{
    vertical-align: 9px; margin-right: 3px;
}
/* 排序 */
.sort{
    width: 16px; height: 24px; display: inline-block; margin-right: 5px; vertical-align: 1px;
}
.asc,.desc{
  width: 12px; height: 12px;display: block;cursor: pointer;
}

.htable-head li:first-of-type,.htable-body ul li:first-of-type{
    border-left: none;
}
/* 固定列表 */
.htable-fixed-right-column{
    position: absolute; right: -1px; 
}
.htable-head .htable-fixed-left-column::before{
    width: 100%; content: ""; height: 1px; position: absolute; top: -1px; left: 0; border-top: 1px solid #ebeef5;
}
.htable-fixed-left-column::before{
    width: 100%; content: ""; height: 1px; position: absolute; top: -1px; left: 0; border-top: 1px solid #ebeef5; 
}
.htable-fixed-left-column{
    position: absolute; left: 1px;border-right: 1px solid #ebeef5; 
    border-left: 1px solid #ebeef5; 
}
.htable-head .htable-fixed-left-column{
    border-top: none;
}
.htable-fixed-left-column + li{
    border-left: none; 
}

/* 第一列 */
.htable-head li.recom-options,.htable-body li.recom-options{
  padding: 0; display: flex; flex-flow: row nowrap;
}
.htable-select,.htable-id{
   height: 100%; float: left;  box-sizing: border-box;
}
.htable-select{ width: 40px; text-align: center;position: relative;}
.htable-select .checkbox-btn{
    position: absolute; z-index: 1;width: 16px; height: 16px; display: block; top: 0; left: 0;right: 0; bottom: 0; margin: auto;
}
.htable-select input[type='checkbox']{
   opacity: 0; position: relative; z-index: 10; cursor: pointer;
}
.htable-id{
   width: 60%; border-left: 1px solid #ebeef5; padding-left: 20px;
}

/* 阴影 */
.htable-fixed-right-column::after{
    content: "";
    width: 1px; height: 100%; box-shadow: -2px -2px 5px #ccc; display: block;position: absolute; left: 0;top: 0;
}
.htable-fixed-left-column::after{
    content: "";
    width: 1px; height: 100%; box-shadow: 2px 2px 5px #ccc; display: block;position: absolute; right: 0;top: 0;
}
/* 操作 */
.htable-body li.operation{
  display: flex; flex-flow: row nowrap;  align-items: center;
}

.operation span{
    width: 20px; height: 20px; display: block; margin-right: 5px; cursor: pointer;
}


/* 图标 */
.insert-icon{
    background: url('~ASSETS_IMG/inner-page/insert_icon_before.png'); background-size: 100%;
}
/* 升序 */
.asc-icon{
    background: url('~ASSETS_IMG/inner-page/asc_icon_before.png') no-repeat center bottom; background-size: 100%; 
}
.asc-icon:hover{
    background: url('~ASSETS_IMG/inner-page/asc_icon.png') no-repeat center bottom; background-size: 100%; 
}
/* 降序 */
.desc-icon{
    background: url('~ASSETS_IMG/inner-page/desc_icon_before.png') no-repeat center top; background-size: 100%; 
}
.desc-icon:hover{
    background: url('~ASSETS_IMG/inner-page/desc_icon.png') no-repeat center top; background-size: 100%; 
}

.insert-icon:hover{
    background-image: url('~ASSETS_IMG/inner-page/insert_icon.png');background-size: 100%;
}
/* 删除 */
.delete-icon{
    background: url('~ASSETS_IMG/inner-page/delete_icon_before.png'); background-size: 100%;
}
.delete-icon:hover{
    background-image: url('~ASSETS_IMG/inner-page/delete_icon.png');background-size: 100%;
}
/* 搜索 */
.search_btn{
    background: url('~ASSETS_IMG/inner-page/search_icon_before.png'); background-size: 100%;
}
.search_btn:hover{
    background: url('~ASSETS_IMG/inner-page/search_icon.png'); background-size: 100%;
}
/* 二维码 */
.code-icon{
    background: url('~ASSETS_IMG/inner-page/code_icon_before.png'); background-size: 100%;
}
.code-icon:hover{
    background: url('~ASSETS_IMG/inner-page/code_icon.png'); background-size: 100%;
}
/* 修改 */
.update-icon{
    background: url('~ASSETS_IMG/inner-page/update_icon_before.png') center no-repeat; background-size: 90%;
}
.update-icon:hover{
    background: url('~ASSETS_IMG/inner-page/update_icon.png') center no-repeat; background-size: 90%;
}
/* 查看 */
.see-icon{
    background: url('~ASSETS_IMG/inner-page/see_icon_before.png') center no-repeat; background-size: 90%;
}
.see-icon:hover{
    background: url('~ASSETS_IMG/inner-page/see_icon.png') center no-repeat; background-size: 90%;
}
/* 分配 */
.fenpei-icon{
    background: url('~ASSETS_IMG/inner-page/fenpei_icon_before.png') center no-repeat; background-size: 90%;
}
.fenpei-icon:hover{
    background: url('~ASSETS_IMG/inner-page/fenpei_icon.png') center no-repeat; background-size: 90%;
}
/* 多选框 */
.checkbox-icon{
    background: url('~ASSETS_IMG/inner-page/checkbox_back_before.png'); background-size: 100%;
}
/* .checkbox-icon:hover{
    background: url('~ASSETS_IMG/inner-page/checkbox_back_after.png'); background-size: 100%;
} */
.checkbox-icon-active{
    background: url('~ASSETS_IMG/inner-page/checkbox_back_active.png'); background-size: 100%;
}
/* 箭头 */
.jiantou-left-icon{
    background: url('~ASSETS_IMG/inner-page/jiantou_left_before.png') center no-repeat; background-size: 50%;
}
.jiantou-left-icon:hover{
    background: url('~ASSETS_IMG/inner-page/jiantou_left.png')center no-repeat; background-size: 50%;
}
.jiantou-right-icon{
    background: url('~ASSETS_IMG/inner-page/jiantou_right_before.png')center no-repeat; background-size: 50%;
}
.jiantou-right-icon:hover{
    background: url('~ASSETS_IMG/inner-page/jiantou_right.png')center no-repeat; background-size: 50%;
}

/* 工具栏 */
.table-tool{
  color: #54565a; font-weight: bold;width: 1052px; margin-bottom: 10px;
  height: 40px; border: 1px solid #ebeef5;padding-left: 10px; box-sizing: border-box;
}
.table-tool .tool-btn{
  width: auto; height: 25px; box-sizing: border-box; line-height: 25px; float: left;
 text-align: center;margin-top: 5.5px; font-size: 14px; cursor: pointer; margin-right: 20px;
}
.table-tool a{
    color: #54565a;  text-decoration: none;
}

.table-tool .tool-btn:hover,.table-tool .tool-btn:hover a{
   color: #38a3d5;
}
.table-tool .tool-btn:hover .insert-icon{
    background-image: url('~ASSETS_IMG/inner-page/insert_icon.png');background-size: 100%;
}
.table-tool .tool-btn:hover .delete-icon{
    background-image: url('~ASSETS_IMG/inner-page/delete_icon.png');background-size: 100%;
}
.tool-icon{
 width: 20px; height: 20px;display: inline-block; vertical-align: -5px;
}
.page-icon{
    width: 28px; height: 28px;display: inline-block; 
}


/* 分页 */
.pagination{
    width: 800px; height: 28px; margin-top: 10px; line-height: 28px;  font-weight: bold; font-size: 12px; text-align: center;color: rgb(88, 88, 88);
    user-select: none;
}
.pagination > ul{
    width: 100%; height: 100%; overflow: hidden;
}
.pagination > ul >li{
  float: left;
}
.page-list{
    width: auto; height: 100%; 
}
.page-item-node{
    
    float: left; width: 30px; height: 28px; background-color: #ebeef5; border-radius: 3px; margin-right: 5px;
    display: block;cursor: pointer;
}
.page-item-node:hover{
    color: #38a3d5; 
}
.page-item-node.active{
    background-color:#38a3d5; color: #FFF;
}